<template>
	<view>
		<view class="uni-title uni-common-pl">地区选择器</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">当前选择</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{ array[index] }}</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import ztabar from '../component/ztabar.vue';
import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		ztabar,
		uniLoadMore
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			isActive: [true, false, false, false],
			title: 'picker',
			array: ['中国', '美国', '巴西', '日本'],
			index: 0,
			date: currentDate,
			time: '12:01'
		};
	},
	methods: {
		testParent: function(params) {
			params.isActive[params.index] == this.isActive[params.index];
			this.isActive[params.index] == true ? (this.isActive[params.index] = false) : (this.isActive[params.index] = true);
			console.log(this.isActive);
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		},
		bindDateChange: function(e) {
			this.date = e.target.value;
		},
		bindTimeChange: function(e) {
			this.time = e.target.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	}
};
</script>

<style>
	page{
		background-color: #ffffff;
	}
</style>
